<template>
  <div class="msg-card w-full flex justify-center items-center">
    <div class="msg-card-item w-226px relative">
      <div class="absolute" style="top: -15px; left: calc(50% - 15px)">
        <img class="w-30px h-30px" src="/favicon.svg" />
      </div>
      <div class="w-full">
        {{ props.msgItem?.msg }}
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  msgItem: { type: Object, default: null },
});

//
</script>

<style scoped lang="scss">
.msg-card {
  padding: 16px 32px 8px;
  .msg-card-item {
    padding: 25px 20px 15px;
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
    color: #78849e;
    box-shadow: 0 2px 10px 0 rgba(197, 204, 219, 0.4);
  }
}
</style>
